<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition>
        <h:head>
            <link rel="stylesheet" type="text/css" href="resource/css/ui/jquery/cupertino/jquery-ui-1.9.2.custom.css"/>
            <link rel="stylesheet" type="text/css" href="resource/css/ui/jqGrid/ui.jqgrid.css"/>
            <!-- 以下导入,不能改变顺序-->
            <script src="resource/js/jquery/jquery-1.7.2.min.js" type="text/javascript"/>
            <script src="resource/js/jqGrid/i18n/grid.locale-cn.js" type="text/javascript"/>
            <script src="resource/js/jqGrid/jquery.jqGrid.min.js" type="text/javascript"/>

            <script type="text/javascript">
                var colModel = #{baseCostReport.headers[0]};
                var colNames = #{baseCostReport.headers[1]};
                var gphd1 = #{baseCostReport.headers[2]};
                var gphd2 = #{baseCostReport.headers[3]};
                jQuery(showProGrid);
                function showProGrid() {
                    jQuery("#gridTable").jqGrid({
                        datatype: "JSON", //将这里改为使用JSON数据
                        url: 'http://localhost:8080/cea/ds', //这是Action的请求地址
                        mtype: 'POST',
                        colNames: ["部门", "预算项目", "内容及工作量", "预算", "支出", "进度", "余额"],
                        colModel: [
                            {"name": "c1", "index": "c1", "width": 50, "align": "left", "frozen": false},
                            {"name": "c2", "index": "c2", "width": 50, "align": "left", "frozen": false},
                            {"name": "c3", "index": "c3", "width": 50, "align": "left", "frozen": false},
                            {"name": "c4", "index": "c4", "width": 50, "align": "right", "frozen": false},
                            {"name": "c5", "index": "c5", "width": 100, "align": "right", "frozen": false},
                            {"name": "c6", "index": "c6", "width": 100, "align": "right", "frozen": false},
                            {"name": "c7", "index": "c7", "width": 100, "align": "right", "frozen": false}
                        ],
                        height: 300,
                        width: 760,
                        shrinkToFit: false, //使用colModel中的width,指定列的宽度
                        scroll: false, //当为true时，翻页栏被禁用，使用垂直滚动条加载数据，且在首次访问服务器端时将加载所有数据到客户端;
                        //当此参数为数字时，表格只控制可见的几行，所有数据都在这几行中加载;
                        pager: '#gridPager', //分页工具栏
                        imgpath: './images', //图片存放路径
                        rowNum: 20, //默认每页显示记录数
                        viewrecords: true, //是否显示行数
                        rowList: [10, 20, 30, 50, 100, 200], //可调整每页显示的记录数
                        loadonce: true, //如果为ture则数据只从服务器端抓取一次
                        altRows: true, //设置表格是否允许行交替变色值
                        caption: '部门预算执行统计', //表头名称
                        postData: {dataType: 'deptBudgetReport1'}
                    }
                    );
                    jQuery("#gridTable").jqGrid('setFrozenColumns');
                    jQuery("#gridTable").jqGrid('navGrid', '#gridPager',
                            {edit: false, add: false, del: false, refresh: true, search: true, view: true,
                                searchtext: '查找', edittext: '编辑', addtext: '添加', refreshtext: '刷新', deltext: '删除', viewtext: '查看',
                                position: 'left'});
                }
            </script>
        </h:head>
        <h:body>
            <h:form id="testform">
                <h:commandButton id="commandButton2" value="查询" type="submit" action="#{baseCostReport.queryli}"/>
                <h:commandButton  value="导出Excel"  action="#{baseCostReport.exportExcel}"/>
                <h:panelGroup>
                    <div id="console" style="color: red"></div>
                    <div id="flag"></div>
                    <div id="dataArea">
                        <table id="gridTable"></table>
                        <div id="gridPager" class="scroll"></div>
                    </div>
                </h:panelGroup>
            </h:form>
        </h:body>
    </ui:composition>
</html>